<template>
  <div class="app-container">
    <TableFilter :data="filter" v-model="query" ref="filter" @change="changeFilter"></TableFilter>
    <el-table border v-loading="loading" :data="tableData" style="width: 100%"
      :header-cell-style="{ background: '#f2f2f2' }">
      <el-table-column prop="序号" label="序号"> </el-table-column>
      <el-table-column prop="类型" label="类别"> </el-table-column>
      <el-table-column prop="项目名称" label="项目名称">
        <template slot-scope="{ row }">
          <h3>{{ row.项目名称 }}<span v-if="row.规格">：{{ row.规格 }}</span></h3>
          <p>{{ row.生产厂家 }}</p>
        </template>
      </el-table-column>
      <el-table-column prop="单价" label="单价"> </el-table-column>
      <el-table-column prop="项目属性" label="项目属性"> </el-table-column>
      <el-table-column prop="选择属性" label="选择属性"> </el-table-column>
      <el-table-column prop="缺省" label="缺省"> </el-table-column>
      <el-table-column prop="项目使用占比" label="使用率">
        <template slot-scope="{ row }">
          <span>{{
            row.项目使用占比
            ? `${(Number(row.项目使用占比) * 100).toFixed(0)}%`
            : ""
          }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import TableFilter from "@/components/TableFilter";
import { Component, Vue } from "vue-property-decorator";
import { getmbsy } from "@/api/statistics";
import { tplls } from "@/api/pathway";
import dayjs from "@/utils/dayjs.min.js";
@Component({
  name: "mbsyltj",
  components: {
    TableFilter,
  },
  computed: {
    filter() {
      return {
        date: {
          props: {
            options: [{ label: "时间段", value: 0 }],
            isTwoRange: true,
            type: "daterange",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
          },
          keys: ["timeType", "kssj", "jssj"],
        },
        inline: [
          {
            props: {
              label: "模板",
              is: "el-select",
              filterable: true, //远程搜索需要
              remote: true, //远程搜索需要

              "remote-method": (e) => {
                this.getTemplates(e);
              },
              options: this.templates,
            },
            data: {
              attrs: {
                placeholder: "请输入关键字搜索",
              },
            },
            keys: "mbid",
          },
        ],
      };
    },
  },
})
export default class extends Vue {
  private dataInfo: any = null;
  private tableData: any = [];
  private templates: any = [];
  private loading: any = false;
  private query: any = {
    timeType: 0,
    kssj: dayjs().subtract(3, "month").format("YYYY-MM-DD"),
    jssj: dayjs().format("YYYY-MM-DD"),
  };
  // private filter: any = {
  //   date: {
  //     props: {
  //       options: [{ label: "时间段", value: 0 }],
  //       type: "daterange",
  //       format: "yyyy-MM-dd",
  //       valueFormat: "yyyy-MM-dd"
  //     },
  //     keys: ["timeType", "kssj", "jssj"]
  //   },
  //   inline: [
  //     {
  //       props: {
  //         label: "模板",
  //         is: "el-select",
  //         filterable: true, //远程搜索需要
  //         remote: true, //远程搜索需要

  //         "remote-method": e => {
  //           this.getTemplates(e);
  //         },
  //         options: this.templates
  //       },
  //       data: {
  //         attrs: {
  //           placeholder: "请输入关键字搜索"
  //         }
  //       },
  //       keys: "mbid"
  //     }
  //   ]
  // };
  private async created() {
    this.getData();
  }
  private async getData() {
    this.loading = true;
    const res = await getmbsy(this.query);
    let ts = (res.data || []);
    let i = 1;
    ts.forEach((it: any) => {
      it.序号 = i++;
    })
    this.tableData = ts;
    this.loading = false;
  }
  private async getTemplates(key) {
    const res = await tplls({ page: 1, size: 20, s: key });
    this.templates = res.data.records.map((v) => {
      return {
        label: v.名称,
        value: v.id,
      };
    });
    console.log(this.templates);
  }
  private changeFilter(e) {
    let data = {
      ...e,
    };
    for (let key in data) {
      if (!data[key] && data[key] != 0) delete data[key];
    }
    this.query = data;
    this.getData();
  }
}
</script>

<style lang="scss" scoped></style>
